<template>
  <div class="container" style="height: 100%">

    <el-form class="query-form query-form-2" style="display: block">
      <el-button @click="dialogManage = true">新增</el-button>
    </el-form>

    <div style="padding:20px;">
      <el-table ref="table" class="roomTable" :data="tableData" style="width: 100%">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="考核名称" prop="name"></el-table-column>
        <el-table-column label="被考核人" prop="assesseeName"></el-table-column>
        <el-table-column label="考核进度">
          <template slot-scope="{row}">
            <el-link v-for="(item,i) in row.assessorList" :type="item.isAssess==0?'danger':'success'" :title="item.isAssess===0?'未考核':'已考核'">&nbsp;&nbsp;{{item.assessorName}}&nbsp;&nbsp;</el-link>
          </template>
        </el-table-column>
        <el-table-column label="考核时间" width="280">
          <template slot-scope="{row}">{{row['startDate']}} - {{row['endDate']}}</template>
        </el-table-column>
        <el-table-column label="操作" width="90">
          <template slot-scope="{row}">
            <el-link v-if="row.isExitsAssessment === 0" type="primary" :underline="false" style="margin-right: 10px" @click="handleModify(row)">修改</el-link>
            <el-popconfirm v-if="row.isExitsAssessment === 0" title="确定删除吗？" @onConfirm="handleDelete(row)">
              <el-link slot="reference" type="primary" :underline="false">删除</el-link>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page-div">
      <el-pagination layout="prev, pager, next,jumper,sizes" :current-page="pageObj.page" :page-size="pageObj.pageSize"
                     :total="pageObj.total" @current-change="currentPageChange" @size-change="sizeChange"
                     :page-sizes='pageObj.pageSizes'></el-pagination>
    </div>


    <el-dialog width="600px" title="考核管理" :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="dialogManage" @close="formManage={}">
      <el-form ref="payForm" v-loading="loading" :rules="ruleManage" :model="formManage" label-width="90px">
        <el-form-item label="考核名称" prop="name">
          <el-input v-model="formManage.name"></el-input>
        </el-form-item>
        <el-form-item label="考核时间" prop="startDate">
          <el-date-picker
            v-model="formManage.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="handleTimeChange"
          />
        </el-form-item>
        <el-form-item label="被考核人" prop="assessee">
          <el-select v-model="formManage.assessee" filterable>
            <el-option v-for="(u,i) in users" :key="'foa'+i" :value="u.empId" :label="u.empName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考核人" prop="assessorList">
          <div class="d-flex">
            <el-select v-model="formManage.assessorList" value-key="empId" multiple filterable>
              <el-option v-for="(u,i) in users" :key="u.empId+i" :value="u" :label="u.empName"></el-option>
            </el-select>
          </div>
          <el-input v-for="(f,i) in formManage.assessorList" :key="'foc'+i" v-model="f.proportion" placeholder="权重(%)" style="margin-top: 5px">
            <div slot="append">{{ f.empName }}</div>
          </el-input>
        </el-form-item>


        <el-form-item label="考核指标">
          <div class="d-flex">
            <el-select v-model="formManage.indicatorList" value-key="indicatorId" multiple filterable>

              <el-option-group v-for="(group,index_group) in indicators" :key="group.indicatorId+index_group" :label="group.name">

                <el-option v-for="(item,index_item) in group.childIndicatorList" :key="item.indicatorId+index_item" :value="item" :label="item.name"></el-option>

              </el-option-group>

            </el-select>
          </div>
          <div v-for="f in formManage.indicatorList" :key="f.indicatorId" class="d-flex" style="margin-top: 5px">
            <el-input v-model="f.proportion" placeholder="评分">
            </el-input>
            <el-input v-model="f.actualCompletion" placeholder="实际完成值">
              <div slot="append">{{ f.name }}</div>
            </el-input>
          </div>
        </el-form-item>


        <div class="f-center">
          <el-button @click="dialogManage=false">取消</el-button>
          <el-button type="primary" style="margin-left: 40px;" @click="handleSubmit">确定</el-button>
        </div>
      </el-form>

    </el-dialog>

  </div>
</template>

<script>

import { listMixin } from '@/mixin'
import {
  getAssessmentList, getAssessmentUserList, getIndicatorList,
  addOrUpdateAssessment, getAssessmentInfo, deleteAssessmemt
} from '@/api/assessment'

export default {
  name: 'index',
  mixins: [listMixin],
  data() {
    return {
      loading: false,
      pageObj: { page: 1, pageSize: 10, total: 0, type: 1 },
      indicators: [],
      dialogManage: false,
      tableData: [],
      ruleManage: {
        name: [{ required: true, message: '请输入 指标名称' }],
        startDate: [{ required: true, message: '请输入 指标说明' }],
        assessee: [{ required: true, message: '请选择 被考核人' }],
        assessorList: [{ required: true, message: '请选择 考核人' }],
      },
      users: [],
      userSelect: [],
      formManage: {
        assessmentId: '',
        name: '',
        assessee: '',
        startDate: '',
        endDate: '',
        assessorList: [],
        indicatorList: [
          // { 'parentId': '9934b7cc-81f7-456c-bba5-3444a97d04cc', 'parentName': '公司指标', 'indicatorProportId': '59614bf7-bb17-4665-87ee-634cf331405f', 'name': '指标项1', 'description': '测试说明', 'proportion': 50.0 }
        ]

      },
    }
  },
  watch: {
    userSelect() {
      // console.log(this.userSelect)
    }
  },
  methods: {
    loadData() {
      return getAssessmentList(this.pageObj).then(res => {
        // console.log(res)
        let { data, total } = res
        this.tableData = data
        this.pageObj.total = total
      })
    },
    loadUsers() {
      getAssessmentUserList().then(res => {
        console.info(res.data.records)
        this.users = res.data.records
      })

    },
    loadIndicator() {
      getIndicatorList().then(res => {
        let { data } = res
        this.indicators = data
      })
    },
    currentPageChange(val) {
      this.pageObj.page = val
      this.loadData()
    },
    sizeChange(val) {
      this.pageObj.page = 1
      this.pageObj.pageSize = val
      this.loadData()
    },

    handleTimeChange(time) {
      this.formManage.startDate = time ? time[0] : ''
      this.formManage.endDate = time ? time[1] : ''
    },

    handleModify(item) {
      getAssessmentInfo(item.assessmentId).then(res => {
        if (res.code !== 10000) {return}
        let data = res.data
        data.time = [
          data.startDate,
          data.endDate
        ]
        data.assessorList.map(item => {
          item.empName = item.assessorName
          item.empId = item.assessor
          delete item.assessorName
          delete item.assessor
        })
        this.formManage = data
        this.dialogManage = true
      })
    },
    handleSubmit() {
      this.formManage.assessorList.map(item => {
        item.assessor = item.empId
      })
      this.loading = true
      addOrUpdateAssessment(this.formManage).then(res => {
        if (res.code !== 10000) {
          this.loading = false
          return
        }
        this.$message.success(res.msg)
        this.loadData()
        this.dialogManage = false
        this.loading = false
      })
    },
    handleDelete(item) {
      if (!item || !item.assessmentId) {return}
      this.loading = true
      deleteAssessmemt(item.assessmentId).then(res => {
        if (res.code !== 10000) {
          this.loading = false
          return
        }
        this.$message.success(res.msg)
        this.loadData()
        this.loading = false
      })
    },

  },
  mounted() {
    this.loadDataProxy()
    this.loadUsers()
    this.loadIndicator()
  }
}
</script>

<style scoped>

</style>
